<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head >
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录页面</title>
    <link rel="icon" href="../static/favicon.ico" th:href="@{/favicon.ico}" type="image/x-icon">
    <!--导入网页图标 -->
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{/favicon.ico}" type="image/x-icon">
    <!--导入网页图标 -->
    <script src="../static/lib/jQuery/jquery-3.5.1.min.js" th:src="@{/lib/jQuery/jquery-3.5.1.min.js}"></script>
    <!--导入jQuery库 -->
    <script src="../static/lib/layui/layui.js" th:src="@{/lib/layui/layui.js}"></script>
    <!--导入layUI库 -->
    <script src="../static/lib/cookie/js.cookie-2.2.1.min.js" th:src="@{/lib/cookie/js.cookie-2.2.1.min.js}"></script>
    <!--导入cookie库 -->
    <link rel="stylesheet" href="../static/lib/layui/css/layui.css" th:href="@{/lib/layui/css/layui.css}" media="all">
    <!--导入layUI css库 -->
    <link rel="stylesheet" href="../static/css/common.css" th:href="@{/css/common.css}">

    <link rel="icon" href="../favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <script src="../lib/jQuery/jquery-3.5.1.min.js"></script>
    <script src="../lib/layui/layui.js"></script>
    <script src="../lib/cookie/js.cookie-2.2.1.min.js"></script>
    <link rel="stylesheet" href="../lib/layui/css/layui.css" media="all">

    <style>
        body {
            background-image: url("");;
            background-size: 100%;
            background-repeat: no-repeat;
        }

        .newLogin-right-block {
            width: 320px;
            height: 450px;
            position: absolute;

            left: 50%;
            top: 50%;
            margin-left: -160px;
            margin-top: -300px;
            text-align: center;
        }


        .title {
            font-size: 40px;
            margin: 0px auto;
            color: rgb(11, 150, 168);

        }


        #login_frame {
            width: 600px;
            height: 450px;
            padding: 13px;

            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -315px;
            margin-top: -200px;


            background-color: rgba(240, 255, 255, 0.5);

            border-radius: 10px;
            text-align: center;

        }

        form p > * {
            display: inline-block;
            vertical-align: middle;
        }

        #image_logo {
            margin-top: 30px;
        }

        .label_input {
            margin-top: 20px;
            font-size: 14px;
            font-family: 宋体;

            width: 65px;
            height: 35px;
            line-height: 35px;
            text-align: center;

            color: white;
            background-color: #3CD8FF;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

        .text_field {
            margin-top: 20px;
            width: 278px;
            height: 35px;
            padding-left: 10px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            border: 0;
        }

        .radio {
            margin-top: 20px;
        }

        #btn_login {
            font-size: 14px;
            font-family: 宋体;

            width: 120px;
            height: 35px;
            line-height: 35px;
            text-align: center;

            color: white;
            background-color: #3BD9FF;
            border-radius: 6px;
            border: 0;

            display: inline-block;
            vertical-align: middle;
            margin-top: 40px;

        }

        #btn_login:hover {
            cursor: pointer;
        }

        #btn_login:active {
            background-color: #268ea8;
        }

        #forget_pwd {
            font-size: 12px;
            color: white;
            text-decoration: none;
            position: relative;
            float: right;
            top: 5px;

        }

        #forget_pwd:hover {
            color: blue;
            text-decoration: underline;
        }

        #login_control {
            padding: 0 28px;
        }

        #btn_login {
            margin-top: 20px;
            width: 357px;
            height: 36px;
            border-radius: 5px;
            background-color: #34d3fa;
        }

        #btn_login:hover {
            background-color: #04a8ff;

        }
        .msg{
            color: red;
            font-size: 20px;
            margin-top: 20px;
        }
    </style>


</head>


<body>
<div id="login_frame">

    <p id="image_logo"><img
            src="">
    </p>
    <!-- <p class="title">海 虹 大 药 房</p> -->
    <form class="layui-form" method="post" action="#" th:action="@{/login}" >


        <p><label class="label_input">用户名</label>
            <input type="text" id="username" name="username" class="text_field" placeholder="请输入用户名">
        </p>
        <p><label class="label_input">密码</label>
            <input type="password" id="password" name="password" class="text_field" placeholder="请输入密码">
        </p>

        <div id="login_control">
            <!--<input type="button" id="btn_login" value="登录" />-->
            <button  id="btn_login" type="submit" class="layui-btn layui-btn-normal" lay-submit="">登 录</button>
        </div>

        <div class="msg" hidden id="msg" th:unless="${#strings.isEmpty(message)}" th:text="${message}"></div>

    </form>
</div>

<script type="text/javascript">

    layui.use('layer',function () {
        var layer = layui.layer;
        var $msg = $("#msg");
        if ($msg.text() !== "") {
            layer.msg($msg.text(), {icon: 2,offset:'t',time:2000})
        }

        // $('#btn_login').click(function () {
        //     var username = $("#username").val();
        //     var password = $("#password").val();
        //     if(username===""){
        //         layer.msg("请填写用户名", {icon: 2,offset:'t',time:1500})
        //         return;
        //     }
        //     if(password===""){
        //         layer.msg("请填写密码", {icon: 2,offset:'t',time:1500})
        //         return;
        //     }
        //     window.location.href = "/login?username="+username+"&password="+password;
        //
        // })
    });



</script>
</body>
</html>